<template>
  <div class="top_search">
    <a-form layout="vertical" :model="searchForm" style="display: flex">
      <a-form-item label="业务类型" class="form_item">
        <a-select
          v-model:value="searchForm.business_type"
          placeholder="请选择"
          :options="balanceType"
          allowClear
        ></a-select>
      </a-form-item>
      <a-form-item label="业务单号" class="form_item">
        <a-input
          placeholder="请输入"
          v-model:value="searchForm.bill_no"
          allowClear
        />
      </a-form-item>
      <a-form-item label="充值状态" class="form_item">
        <a-select
          v-model:value="searchForm.order_status"
          placeholder="请选择"
          :options="payStatusList"
          allowClear
        ></a-select>
      </a-form-item>
      <a-form-item label="支付方式" class="form_item">
        <a-select
          v-model:value="searchForm.pay_method"
          placeholder="请选择"
          :options="payTypeList"
          allowClear
        ></a-select>
      </a-form-item>
      <a-form-item label="交易时间" style="width: 300px" class="form_item">
        <a-range-picker
          @change="handleDateChange"
          v-model:value="timeRange"
          allowClear
        />
      </a-form-item>

      <!-- <a-form-item label=" " class="form_item">
        <a-button type="primary" @click="queryThis('query')">
          <template #icon>
            <SearchOutlined />
          </template>
          查询
        </a-button>
        <a-button
          type="default"
          style="margin-left: 10px"
          @click="queryThis('reset')"
        >
          <template #icon>
            <ReloadOutlined />
          </template>
          重置
        </a-button>
      </a-form-item> -->
      <a-form-item label=" " style="flex: 1; margin-left: 10px; display: flex">
        <a-button type="primary" @click="queryThis('query')">
          <template #icon>
            <SearchOutlined />
          </template>
          查询
        </a-button>
        <a-button
          type="default"
          style="margin-left: 10px"
          @click="queryThis('reset')"
        >
          <template #icon>
            <ReloadOutlined />
          </template>
          重置
        </a-button>
        <a-button
          type="primary"
          :loading="exportLoading"
          @click="handleExport"
          style="margin-left: 10px"
          ><template #icon> <ReloadOutlined /> </template>导出</a-button
        >
      </a-form-item>
    </a-form>
  </div>

  <!-- <div class="export">
    <a-button type="primary" :loading="exportLoading" @click="handleExport"
      >导出</a-button
    >
  </div> -->

  <div class="table_con">
    <a-table
      :loading="tableLoading"
      :pagination="pagination"
      :dataSource="dataSource"
      :columns="columns"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'business_name'">
          <div
            style="
              width: 300px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            "
          >
            {{ record.business_name }}
          </div>
        </template>

        <template v-if="column.key === 'bill_no'">
          {{ record?.bill_no }} {{ " | " }}
          {{ record?.order_no }}
        </template>
        <template v-if="column.key === 'modification'">
          <div v-if="record.pre_balance">交易前:{{ record.pre_balance }}</div>
          <div v-if="record.balance">交易后:{{ record.balance }}</div>
        </template>
      </template>
    </a-table>
  </div>
  <ExportMdal :visible="visibleExport" @cacel="visibleExport = false" />
</template>

<script>
import { defineComponent, reactive, toRefs, computed } from "vue";
import {
  DownOutlined,
  UpOutlined,
  SearchOutlined,
  ReloadOutlined,
} from "@ant-design/icons-vue";
import dayjs from "dayjs";
import request from "../../../../common/utils/request";
import { message } from "ant-design-vue";
import ExportMdal from "../../../shotstack/components/ExportMdal/index.vue";

const initialParams = {
  /**
   * 业务类型
   */
  business_type: null,
  /**
   * 业务单号
   */
  bill_no: "",
  /**
   * 充值状态：0-充值中，1-充值成功，2-充值失败。不传值查所有
   */
  order_status: null,
  /**
   * 支付方式
   */
  pay_method: null,
  /**
   * 充值时间-开始
   */
  pay_start_time: "",
  /**
   * 充值时间-结束
   */
  pay_end_time: "",
};

export default defineComponent({
  name: "rechargeRecords",
  components: {
    DownOutlined,
    UpOutlined,
    SearchOutlined,
    ReloadOutlined,
    ExportMdal,
  },
  setup() {
    const state = reactive({
      tableLoading: false,
      dataSource: [],
      timeRange: null,
      visibleExport: false,
      pageInfo: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      searchForm: {
        ...initialParams,
      },
      payStatusList: [
        { value: 0, label: "充值中" },
        { value: 1, label: "充值成功" },
        { value: 2, label: "充值失败" },
      ],
      payTypeList: [],
      transitionType: [],
      balanceType: [
        { value: 1, label: "空间扩容" },
        { value: 2, label: "积分" },
        { value: 3, label: "套餐变更" },
      ],
      columns: [
        {
          title: "充值时间",
          dataIndex: "created_at",
          key: "created_at",
          width: 220,
        },
        {
          title: "名称",
          dataIndex: "business_name",
          key: "business_name",
          width: 220,
        },
        {
          title: "业务类型",
          dataIndex: "business_txt",
          key: "business_txt",
        },
        {
          title: "业务单号 | 支付流水号",
          dataIndex: "order_name",
          key: "order_name",
        },
        {
          title: "金额（元）",
          dataIndex: "order_money",
          key: "order_money",
        },
        {
          title: "充值状态",
          dataIndex: "business_status_txt",
          key: "business_status_txt",
        },
        // {
        //   title: "操作人",
        //   dataIndex: "action",
        //   key: "action",
        // },
        {
          title: "支付方式",
          dataIndex: "pay_method_txt",
          key: "pay_method_txt",
        },
      ],
      exportLoading: false,
    });

    const pagination = computed(() => ({
      current: state.pageInfo.page,
      total: state.pageInfo.total,
      pageSize: state.pageInfo.pageSize,
      showSizeChanger: true,
      showTotal: (total) => `共${total}条`,
    }));


    const handleExport = () => {
      state.exportLoading = true;
      request
        .put("/work_ai", "/user/shotstack/user/order/export", {
          ...state.searchForm,
        })
        .then((res) => {
          if (res.result) {
            state.exportLoading = false;
            state.visibleExport = true;
          }
        })
        .catch((err) => {
          state.exportLoading = false;
          message.error("操作失败");
        })
        .finally(() => {
          state.exportLoading = false;
        });
    };

    const handleTableChange = ({ current, pageSize }) => {
      console.log(current, pageSize);
      state.pageInfo.pageSize = pageSize;
      state.pageInfo.page = current;
      getTableList();
    };

    const handleDateChange = (date, dateString) => {
      console.log(date, dateString);
      state.searchForm.pay_start_time = dateString[0];
      state.searchForm.pay_end_time = dateString[1];
    };

    const getTableList = () => {
      let params = {};
      state.tableLoading = true;
      Object.assign(params, state.pageInfo);
      Object.assign(params, state.searchForm);
      // state.balanceType = [];
      state.payTypeList = [];
      request
        .get("/work_ai", "/user/trade/record/list", params)
        .then((res) => {
          console.log(res,'列表数据');
          
          state.dataSource = res.list;
          state.tableLoading = false;
          state.dataSource.forEach((item) => {
            if (item.pay_method_txt == null) {
              item.pay_method_txt = " -- ";
            }
          });

          for (let key in res.pay_type_list) {
            state.payTypeList.push({
              label: res.pay_type_list[key],
              value: key,
            });
          }

          state.pageInfo.total = res?.total;

          // state.dataSource = res.result.data;
          // for (let key in res.result.account_type_list) {
          //   state.balanceType.push({
          //     label: res.result.account_type_list[key],
          //     value: key,
          //   });
          // }
          // for (let key in res.result.pay_type_list) {
          //   state.payTypeList.push({
          //     label: res.result.pay_type_list[key],
          //     value: key,
          //   });
          // }
          // state.tableLoading = false;
        })
        .catch((err) => {
          state.tableLoading = false;
        });
    };

    const queryThis = (type) => {
      Object.assign(state.pageInfo, {
        page: 1,
        pageSize: 10,
        total: 0,
      });
      if (type == "query") {
        getTableList();
      } else {
        state.searchForm = {
          ...initialParams,
        };
        state.timeRange = null;
        getTableList();
      }
    };

    getTableList();



    return {
      ...toRefs(state),
      pagination,
      handleTableChange,
      getTableList,
      queryThis,
      handleDateChange,
      handleExport,
    };
  },
});
</script>

<style lang="less" scoped>
.form_item {
  margin-left: 10px;
  width: 200px;

  &:nth-child(1) {
    margin-left: 0;
  }
}

.export {
  text-align: right;
  margin-bottom: 10px;
}
</style>
